// JavaScript Document
window.videoInfo = {};

;(function( window, document ) {
	PLAYER = function(){
		//视频id
        this.videoID    = PLAYER.mkVideoId();
		//播放进度id
        this.progressID = PLAYER.mkVideoId()+'__progressID';
		//加载进度
		this.cacheID    = PLAYER.mkVideoId()+   '__cacheID';
		//接收点击事件的"div"id
        this.clickID    = PLAYER.mkVideoId()+   '__clickID';
		
		//<div id ='ctrlerID'>
		//<div id='progressID'></div>
		//<div id='cacheID'>   </div>
		//<div id='clickID'>   </div>
		//</div>
		//进度条的一个总的盒子
        this.ctrlerID   = PLAYER.mkVideoId()+  '__ctrlerID';
        PLAYER.mkCoverDiv()
        PLAYER.mkShowDiv ()
        this.mkProgress  ()
        this.mkClickDiv  ()
		this.mkcache     ()
        PLAYER.mkDiv( this.ctrlerID 
		           , 'background-color:#000;position:fixed;bottom:0px;height:50px;width:'
                     +window.innerWidth+'px;'
                     +'filter: alpha(opacity = 70);opacity: .7;display:none;z-index:9999'  
                   ,'' )
	    var that = this;	        
		 window.addEventListener( 'resize' , window.PLAYER.changeVideoWidthAndHeight = function() {
           try {that.eventListenerResize(that)}catch (e){console.error(e)}
         }, false)
		
			 
			that.changeClickIDWidth(that);			
    }
	 //PLAYER.prototype.constructor=PLAYER;
	//窗口大小发生改变时所执行的函数 用于改变视频的宽高以及margin;
	PLAYER.prototype.eventListenerResize = function(that) {
		
	     if( window.heightMode !== true) {
						  
					that.player().setAttribute( 'height'
					 , parseInt( window.innerWidth/(window.videoInfo.width/window.videoInfo.height) )+"px"  )
					 
                    that.player().setAttribute('width', window.innerWidth+"px"  )
					
					that.player().setAttribute('style'				
					 , "margin:   "+  parseInt(((window.innerHeight
					 -window.innerWidth/(window.videoInfo.width/window.videoInfo.height )) )*0.5) +"px 0px ;" 
					 ) 					 
					 
	    }else{
					  that.player().setAttribute( 'height' , window.innerHeight+"px"  )	
					 
					 document.getElementById(that.videoID).setAttribute('width'
					 , parseInt( window.innerHeight* window.videoInfo.width/window.videoInfo.height )  +"px"  )
					 
					 that.player().setAttribute('style'
					 , "margin:auto  "+  parseInt(((window.innerWidth
					 -window.innerHeight*window.videoInfo.width/window.videoInfo.height ) )*0.5) +"px ;"  ) 
					 	 
		}
					 	
					
					 // treX.traceOne("window.heightMode:"+window.heightMode
					// +"true为高度模式（视频高度为窗口高度），其它为宽度模式",false)	
	}
	
	//窗口resize时，改变clickID的宽度 添加click事件侦听函数
	PLAYER.prototype.changeClickIDWidth = function(that) {
	window.addEventListener('resize', function () {
                try {                 
					that.$(that.clickID).removeEventListener("click")
					
					that.$(that.clickID).addEventListener('click',
					function(){that.goClick()},false) 
					
					that.$(that.clickID).style.width = window.innerWidth + 'px'
                }catch (e){console.warn(e) ;}
            }, false)	
			window.addEventListener('resize', function () {
                try {									
                   that.$(that.ctrlerID).style.width = window.innerWidth + 'px'
                }catch (e){ console.error(e) }
            }, false)
				
	}
	
 
	PLAYER.prototype.$ = function(id){
	    return document.getElementById(id);	
	}
    PLAYER.prototype.player = function(){
        return document.getElementById(this.videoID);
    }
    PLAYER.mkVideoId = function(){
        return 'VID'+(new Date()).getTime()+'__'+Math.random()+'__'+
            Math.round(  Math.random()*( 9999-1 - 0) + 0  )
    }
	
	//显示帧率信息
    PLAYER.mkShowDiv = function(){
        var oDiv = document.createElement('div')
        oDiv.id = 'info'
        oDiv.style.cssText = 'position:fixed;top:10px;left:70px;z-index: 1; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;  background-color:#f60;padding:4px;color:#fff;filter: alpha(opacity = 90);opacity: 0.9;display:none;font-size:24px;font-family:"思源黑体 CN Light"'
        window.document.getElementsByTagName('body')[0].appendChild(oDiv)
    }
	
	//生成video标签的html代码
	PLAYER.prototype.mkVideo = function(src,target){
        if(typeof src === 'undefined'){
            var src = 'xx.mp4';
        }
	
    var oVideo = document.createElement('video');
        oVideo.setAttribute('autoplay','autoplay');
        oVideo.setAttribute('loop','loop');
        oVideo.setAttribute('width',window.innerWidth+'px');
		 
        oVideo.id = this.videoID;
    var oSource = PLAYER.mkVideoSource(src);
        oVideo.appendChild(oSource);
    var oDiv = document.createElement('div')
	 
        oDiv.innerHTML = 'Your browser does not support the video tag';
        oVideo.appendChild(oDiv);
		  
	if( typeof target === 'undefined' ){
         var target=window.document.getElementsByTagName('body')[0]; 
	}
	
		  target.appendChild( oVideo );	
	}

    PLAYER.mkVideoSource = function(src) {
        var oSource=document.createElement('source');
        oSource.setAttribute('src',src);
        oSource.setAttribute('type','video/mp4')
        return oSource;
    }
	
	//覆盖层 透明以去掉原始的播放控件
    PLAYER.mkCoverDiv = function() {
        var oCoverDiv = document.createElement('div');
        oCoverDiv.style.cssText='position:absolute;top:0px; width:'+window.innerWidth+'px'
        +'; height:'+window.screen.height+'px'+';'
        +'z-Index:99;background-color:blue;filter: alpha(opacity=0); opacity: 0'
		oCoverDiv.id='oCoverDiv__'+ PLAYER.mkVideoId()
        var body = window.document.getElementsByTagName('body')[0];
        body.appendChild(oCoverDiv)
		window.addEventListener('resize', function () {
                try {
                    document.getElementById(oCoverDiv.id).style.width= window.innerWidth + 'px' 
                }catch (e){console.error(e)}
            }, false)
				
    }
	
	//视频播放进度层
	//含有this所以不能用静态方法 PLAYER.mkProgress 去定义函数
    PLAYER.prototype.mkProgress = function() {
        var oDiv = document.createElement('div')
        oDiv.style.cssText = 'background-color:#500389;height:50px;width:'
            + '0px;position:fixed;bottom:0px;filter: alpha(opacity = 50);opacity: 0.5;'
        oDiv.id  = this.progressID;
        var that = this;
        window.setTimeout(function (){
        document.getElementById(that.ctrlerID).appendChild(oDiv)
        },0)
    }
	
	
	//视频播放缓冲层
    PLAYER.prototype.mkcache = function() {
        var oDiv = document.createElement('div')
        oDiv.style.cssText = 'background-color:#333 ;height:50px;width:'
            + '0px;position:fixed;bottom:0px;filter: alpha(opacity = 50);opacity: 0.5; z-index:-10'
        oDiv.id  = this.cacheID;
        var that = this;
        window.setTimeout(function (){
        document.getElementById(that.ctrlerID).appendChild(oDiv)
        },0)
    }
	
	
	
	//Click事件层
    PLAYER.prototype.mkClickDiv = function() {
        var oDiv = document.createElement('div')
        oDiv.style.cssText = 'background-color:red;height:50px;z-index:200000000;width:'
            +window.innerWidth+'px;position:fixed;bottom:0px;filter: alpha(opacity = 0);opacity: 0;'
        oDiv.id  = this.clickID;
        var that =this;
        window.setTimeout(function (){
			//把click层加入盒子。并侦听事件 click
            document.getElementById(that.ctrlerID).appendChild(oDiv)
            document.getElementById(that.clickID).addEventListener('click',function(){
                that.goClick()
            },false)
			  
        },100)
		 
    }
    PLAYER.prototype.goClick = function() {
        try {
       var event = event || window.event ||  arguments.callee.caller.arguments[0]/*支持火狐*/ ;
        var time = (TOOLS.getMousePagePos(event)[0] / window.innerWidth) * this.player().duration
        }catch (e){ }
        this.player().currentTime =  time ;

    }
    PLAYER.mkDiv = function(id,cssText,innerHTML){
        var innerHTML =innerHTML || "";
        var body = document.getElementsByTagName('body')[0];
        var div  = document.createElement("div");
        div.id   = id;
        div.innerHTML     = innerHTML;
        div.style.cssText = cssText;
        try{body.insertBefore(div,body.childNodes[0]);	}catch(e){ }
    }
    window.PLAYER = PLAYER;
}(window,document))


